<template>
  <div class="movieContainer">
    <el-card style="margin: 20px 20px; width: 96%">
      <div class="movieform" v-show="!isShowInfo & !isShowDetail">
        <el-form inline>
          <!-- 添加电影的按钮 -->
          <el-form-item
            ><el-button
              type="primary"
              style="margin-bottom: 20px"
              @click="handleAddInfo"
              >添加电影</el-button
            ></el-form-item
          >
          <!-- 搜索框 -->
          <el-form-item style="margin-left: 60%">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="keyword"
              @keyup.enter.native="goSearch"
              style="width: 300px"
              @input="changeKeyword"
              clearable
            >
            </el-input
          ></el-form-item>
        </el-form>
        <!-- 展示电影列表的表格 -->
        <el-table
          :data="movieListShow"
          border
          stripe
          style="margin-bottom: 20px"
        >
          <el-table-column type="index" align="center" width="80" label="序号">
          </el-table-column>
          <el-table-column prop="nm" width="200" label="名称">
          </el-table-column>
          <el-table-column prop="star" width="200" label="主演">
          </el-table-column>
          <el-table-column prop="img" width="200" label="图片">
            <template slot-scope="{ row, $index }">
              <img :src="row.img" class="listImg" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row, $index }">
              <Hint-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                title="修改详情"
                @click="handleEditDetail(row.id, row)"
              ></Hint-button>
              <Hint-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                title="修改电影"
                @click="handleEditInfo(row)"
              ></Hint-button>
              <Hint-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看详情"
                @click="skanDetail(row.id, row)"
              ></Hint-button>
              <el-popconfirm :title="`您确定要删除《${row.nm}》吗`" @onConfirm="handleDeleteInfo(row.id)" style="margin-left: 10px">
                <Hint-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除电影"
                  slot="reference"
                ></Hint-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="total"
          style="text-align: center"
        >
        </el-pagination>
      </div>
      <!-- 电影信息 -->
      <MovieInfo
        :visible.sync="isShowInfo"
        ref="info"
        @saveSuccess="saveInfoSuccess"
        :isAddInfo="isAddInfo"
      />
      <!-- 电影详情 -->
      <MovieDetail
        :visible.sync="isShowDetail"
        ref="detail"
        @saveSuccess="saveDetailSuccess"
      />
      <!-- 查看电影详情的对话框 -->
      <el-dialog title="电影详情" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="电影名称" :label-width="formLabelWidth">
            <span>{{ form.name }}</span>
          </el-form-item>
          <el-form-item label="英文名称" :label-width="formLabelWidth">
            <span>{{ form.englishName }}</span>
          </el-form-item>
          <el-form-item label="电影类型" :label-width="formLabelWidth">
            <span v-for="(item, index) in form.type" :key="index">{{
              `${item},`
            }}</span>
          </el-form-item>
          <el-form-item label="电影主演" :label-width="formLabelWidth">
            <span v-if="!Array.isArray(form.actors)">{{ form.actors }}</span>
            <span v-else v-for="(item, index) in form.actors" :key="index">{{
              `${item},`
            }}</span>
          </el-form-item>
          <el-form-item label="上映时间地点" :label-width="formLabelWidth">
            <span>{{ form.time }}</span>
          </el-form-item>
          <el-form-item label="放映时长" :label-width="formLabelWidth">
            <span>{{ form.duration }}</span>
          </el-form-item>
          <el-form-item label="电影评分" :label-width="formLabelWidth">
            <span>{{ form.evaluate ? form.evaluate.pingfen : "" }}</span>
          </el-form-item>
          <el-form-item label="电影简介" :label-width="formLabelWidth">
            <span>{{ form.intro }}</span>
          </el-form-item>
          <el-form-item label="电影图片" :label-width="formLabelWidth">
            <el-image
              style="width: 100px; height: 120px"
              :src="form.movieImg"
              fit="fill"
            ></el-image>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >关 闭</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import MovieInfo from "./movieInfo";
import MovieDetail from "./movieDetail";
export default {
  name: "Movie",
  components: { MovieInfo, MovieDetail },
  data() {
    return {
      movieList: [],
      currentPage: 1, // 当前是第几页
      pageSize: 1, //每页显示几条数据
      // total:
      isShowInfo: false, //是否显示电影信息页
      isShowDetail: false, //是否显示电影详情页
      keyword: "", //搜索框中的关键字
      dialogFormVisible: false, //查看详情对话框是否显示
      formLabelWidth: "100px",
      form: {},
      isAddInfo: false,//是否为添加电影
    };
  },
  computed: {
    // 电影总条数
    total() {
      return this.movieList.length;
    },
    // // 当前页显示的电影列表
    movieListShow() {
      let begin = this.pageSize * (this.currentPage - 1);
      if (!this.movieList[begin]) {
        begin -= this.pageSize;
      }
      return this.movieList.slice(begin, begin + this.pageSize);
    },
  },
  mounted() {
    // 获取电影列表
    this.getMovieList();
  },
  methods: {
    // 获取电影列表
    async getMovieList() {
      const res = await this.$API.movie.getMovieList();
      if (res.code !== 200) {
        this.$message.error("获取电影列表失败");
        return;
      }
      // 获取成功,更新数据
      this.movieList = res.movie;
    },
    // 搜索
    async goSearch() {
      if(!this.keyword.trim().length){
        return
      }
      const result = await this.$API.movie.getOneMovie(this.keyword);
      if (result.code !== 200 || result.movie.length == 0) {
        this.$message.warning("没有符合条件的电影");
        return;
      }
      // 获取成功,更新数据
      this.movieList = result.movie;
    },
    // 改变关键字
    changeKeyword() {
      if (!this.keyword.trim().length) {
        // 重新获取电影列表
        this.getMovieList();
      }
    },
    // 清除搜索框
    // clearSearch(){
    //   this.keyword = ''
    // },
    // 分页器
    // 改变每页显示的条数
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 修改电影信息
    handleEditInfo(movieInfo) {
      // 修改电影信息页面显示
      this.isShowInfo = true;
      // 修改页面初始化数据
      this.$refs.info.initData(movieInfo);
      // 通知子组件,此次为修改,不是添加
      this.isAddInfo = false
    },
    // 保存电影信息成功(添加或修改)
    saveInfoSuccess() {
      // 重新获取数据
      this.getMovieList();
    },
    // 添加电影
    handleAddInfo() {
      // 添加电影信息页面显示
      this.isShowInfo = true;
      // 通知子组件,此次为添加,不是修改
      this.isAddInfo = true
      this.$refs.info.deleteActors()
    },
    // 删除电影
    async handleDeleteInfo(movieId) {
      // 发请求
      const result = await this.$API.movie.delMovieList(movieId);
      if (result.code !== 200) {
        // 获取失败
        this.$message.error("删除失败");
        return;
      }
      // 删除成功,重新获取数据
      this.$message.success("删除成功");
      this.getMovieList();
    },
    // 修改详情
    handleEditDetail(movieId, info) {
      // 显示详情页面
      this.isShowDetail = true;
      // 初始化数据
      this.$refs.detail.initData(movieId, info);
    },
    // 保存电影详情成功(添加或修改)
    saveDetailSuccess() {
      // 重新获取数据
      this.getMovieList();
    },
    // 查看电影详情
    async skanDetail(movieId, info) {
      // 显示对话框
      this.dialogFormVisible = true;
      const result = await this.$API.movie.getMovieDetail(movieId);
      if (result.code !== 200) {
        this.$message.error("获取详情失败");
        return;
      }
      // 获取成功,更新数据
      if (Array.isArray(result.movieDetail)) {
        if (result.movieDetail.length) {
          // 返回的是数组,且长度不为0
          this.form = result.movieDetail[0];
        } else {
          // 返回空数组(新添加的电影,还未添加详情)
          this.form = {
            id: info.id,
            movieImg: info.img, //电影图片
            name: info.nm, //电影名称
            englishName: "", //英文名
            type: [], //电影类型
            actors: info.star, //主演
            time: "", //上映时间和地点
            duration: "", //时长
            evaluate: {
              pingfen: info.sc, //评分
            },
            intro: "", //简介
          };
        }
      } else {
        // 返回的是对象
        this.form = result.movieDetail;
      }
      // 获得电影信息数据
      this.form.movieImg = info.img;
      this.form.name = info.nm
      this.form.actors = info.star
      this.form.evaluate.pingfen = info.sc
    },
  },
};
</script>

<style scoped>
.movieContainer .listImg {
  width: 100px;
  height: 120px;
}
</style>
